<template>
  <div class="background_style">
    <div class="main">
      <div class="mylogin" align="center">
        <h1 class="sys">欢迎来到登录页面！</h1>
        <el-form
          :model="user"
          status-icon
          :rules="loginRules"
          ref="user"
          label-width="100px"
          class="userLogin"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model.number="user.username"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="user.password" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="agePassword">
            <el-input type="password" v-model="agePassword" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submit">登录</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import Cookie from "js-cookie";
import { login } from "@/api/login-register";
export default {
  name: "Login",
  data() {
    return {
      user: {
        username: "",
        password: ""
      },
      loginRules: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      },
      agePassword: ""
    };
  },
  methods: {
    submit() {
      const username = this.user.username;
      const password = this.user.password;
      const agePassword = this.agePassword;
      if (!username) {
        return this.$message({
          type: "error",
          message: "账号不能为空！"
        });
      }
      if (!password) {
        return this.$message({
          type: "error",
          message: "密码不能为空！"
        });
      }
      if (password !== agePassword) {
        return this.$message({
          type: "error",
          message: "两次密码不一致！"
        });
      }
      login(username, password)
        .then(
          res => {
            if (res.data.code === 200) {
              // 获取权限信息
              const menus = res.data.data.menus;
              this.$store.commit("setMenu", menus);
              console.log("res.data", res.data);
              //存储token
              Cookie.set("token", res.data.data.token);
              // 存储头像路径
              Cookie.set("imageUrl", res.data.data.image);
              // 存储当前用户id
              Cookie.set("id", res.data.data.id);
              // 存储创建用户的时间
              Cookie.set("time", res.data.data.createTime);
              const time = res.data.data.createTime;
              this.$store.commit("setTime", time);
              // 存储用户的身份
              const status = res.data.data.status;
              Cookie.set("status", res.data.data.status);
              this.$store.commit("setStatus", status);
              // 存储用户姓名
              const username = res.data.data.username;
              Cookie.set("username", res.data.data.username);
              this.$store.commit("setUsername", username);
              // 登录成功，跳转到layout
              this.$router.push({
                name: "layout"
              });
            } else {
              alert(res.data.message);
            }
          },
          err => {
            alert(err.message);
          }
        )
        .catch(function(error) {
          // 处理错误情况
          alert(error.message);
        });
    },
    reset() {
      (this.user.password = ""),
        (this.user.username = ""),
        (this.agePassword = "");
    }
  }
};
</script>

<style scoped>
.main {
  width: 100vw;
  padding: 0;
  margin: 0;
  height: 100vh;
  font-size: 16px;
  background-position: left top;
  /* background-color: #242645; */
  color: #fff;
  font-family: "Source Sans Pro";
  position: relative;
}
.userLogin {
  margin-left: -60px;
}
.sys {
  font-size: 30px;
  font-weight: bolder;
  color: aqua;
  text-align: center;
}
.mylogin {
  width: 360px;
  height: 360px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 50px 40px 40px 40px;
  box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
  opacity: 1;
  background: linear-gradient(
    230deg,
    rgba(180, 197, 28, 0) 0%,
    rgb(219, 231, 233) 100%
  );
}

/* 引入背景图片 */
.background_style {
  background-image: url("/src/image/background.webp");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}
</style>